<template>
	<view class="city">
		<view class="cityHeadItem">
			<!-- 头部区域 -->
			<view class="cityHead">
				<view class="cityHeadIcon" @click="returnHome">
					<image src="http://localhost:3000/static/a15.png" mode=""></image>
				</view>
				<view class="switchCity">切换城市</view>
			</view>
		</view>
		
		<!-- 位置区域 -->
		<view class="location">
			<text>当前定位：</text>
			<view class="locationCity">{{city}}</view>
		</view>
		
		<view class="container">
			<!-- 热门城市区域 -->
			<view class="hotCity">
				<view class="hotCityTitle">热门城市</view>
				<view class="hotCityList">
					<view class="hotCityItem" v-for="(item,i) in hotCity" @click="returnCity(item)" :key="i">{{item}}</view>
				</view>
			</view>
			
			<!-- 城市区域 -->
			<view class="cityWrap" v-for="(item,i) in cityList" :key="i">
				<view class="letter">{{item.letter}}</view>
				<view class="cityItem" @click="returnHomeCity(item2)" v-for="(item2,i2) in item.data" :key="i2" >{{item2}}</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityList:[],  //城市数组
				// 热门城市数组
				hotCity:[
					"北京市","上海市","广州市","厦门市","杭州市",
					"武汉市","南京市","成都市","长沙市","重庆市",
					"昆明市","攀枝花市"
				],
				city:''
			};
		},
		onLoad(city) {
			this.getCityList()
			// console.log(city.city)
			if(city.city == 'undefined'){
				this.city='郑州'
			}else{
				this.city=city.city
			}
		},
		methods: {
			returnHome(){  //返回home页面
				uni.navigateBack()
			},
			//返回home热门城市
			returnCity(item){
				uni.redirectTo({
					url:'/pages/home/home?city='+item
				})
			},
			//返回home城市
			returnHomeCity(item2){
				uni.redirectTo({
					url:'/pages/home/home?city='+item2
				})
			},
			// 请求城市数据
			async getCityList(){
				const { data:res } = await uni.$http.get('/address')
				this.cityList = res.data
			}
		}
	}
</script>

<style lang="scss">
.city{
	padding-left: 20rpx;
	box-sizing: border-box;
	.cityHeadItem{
		.cityHead{
			width: 100%;
			height: 115rpx;
			background-color: pikn;
			padding-top: 70rpx;
			box-sizing: border-box;
			display: flex;
			.cityHeadIcon{
				image{
					width: 20rpx;
					height: 20rpx;
					margin-right: 20rpx;
				}
			}
			.switchCity{
				font-size: 32rpx;
				color: #232e3d;
			}
		}
	}
	
	// 位置区域
	.location{
		margin: 60rpx 0 100rpx;
		color: #232e3d;
		font-size: 22rpx;
		.locationCity{
			display: inline-block;
		}
	}
	// 热门城市
	.hotCity{
		margin-bottom: 72rpx;
		.hotCityTitle{
			font-size: 32rpx;
			color: #232e3d;
		}
		// 热门城市区域 
		.hotCityList{
			display: flex;
			flex-wrap: wrap;
			.hotCityItem{
				width: 100rpx;
				line-height: 40rpx;
				color: #8a94a1;
				margin: 28rpx 40rpx;
				font-size: 22rpx;
				background-color: #fafafb;
				text-align: center;
				border-radius: 17rpx;
			}
		}
	}
	// 城市区域
	.cityWrap{
		color: #232e3d;
		// padding-top: 72rpx;
		.letter{
			margin-bottom: 60rpx;
		}
		.cityItem{
			margin-bottom: 60rpx;
			font-size: 28rpx;
		}
	}
}

</style>
